<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin:0;
		padding: 0;
		text-decoration: none;
	}
	#father{
		height:527px ;
		width: 375px;
		/*border:1px solid #cccccc;*/
		background-color: #F5F5F5;
		margin:0 auto;
		overflow-x: hidden;
		overflow-y: auto;
		position: relative;
	}
	#son{
		height:527px ;
		width: 375px;
		/*border:1px solid #cccccc;*/
		background-color: #F5F5F5;
		margin:0 auto;
		overflow-x: hidden;
		overflow-y: auto;
	}
	a{
		color: black;
	}
	button{
		margin:0px -15px;
		border-radius: 8px;
		background-color: #99b3cc;
		font-size: 12px;
	}
	span{
		margin: 15px 17%;
	}
	details{
		margin-top:20px;
	}
	input{
		width:40px;
		height: 30px;
		background-color: #F5F5F5;
		font-size: 15px;
		border-radius: 50%;
		margin: 5px 20px;
	};
	#two{
		margin-top: 170px;
	}
	#dp{
		width:15px;
		height: 15px;
	}
	#plk{
		display: none;
		margin:0 auto;
	}
	#tj{
		width:40px;
		height: 25px;
		font-size:12px;
		display: block;
		margin:-5px auto;
		border-radius: 20%;
		line-height: 25px;
		text-align: center;
	}
	#sj{
		width:20px;
		height: 20px;
		vertical-align: middle;
	}
	#fb{
		font-size: 15px;
	}
	#fxk{
		width:373px;
		height: 105px;
		border: 1px solid gray;
		display: none;
		position: absolute;
		/*margin-top: 10px;*/
		bottom: 0;
		background-color: #F5F5F5;
		border-radius: 5px;
	}
	details summary::-webkit-details-marker { display:none; };
    </style>
</head>
<body>
	<div id="father">
		<div id="son">
			<p style="font-size: 20px;letter-spacing: 10px;">
				<a href="index.html">&lt;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;简答题&nbsp;&nbsp;
				<img src="img/小星星.png" alt="" id="dp" style="vertical-align: middle;">
				<button id="sc" style="vertical-align: middle;">收藏</button>&nbsp;&nbsp;
				<!-- <img src="分享.png" alt="" id="fx"> -->
				<button onclick="testaa(this);" style="vertical-align: middle;" id="fx">分享</button></p>
				<!-- <script>
					function testaa(){
					alert("微信、qq");}
				</script> -->
			<p style="margin: 15px 5px;text-indent: 1em;">1.Spring中有哪些增强处理，区别？<br>
				<textarea cols="45" rows="4" placeholder="请输入你的答案" style="margin:10px 15px;resize: none;"></textarea>
				<input type="submit" id="tj">
			</p>
			<details>
			  <summary><p style="vertical-align: middle;display: inline;"id="dj";>答案与解析<img src="img/三角形2.png" alt="" id="sj"></p></summary>
			  <p>答案是： <br>
			 org.springframework.aop.BeforeAdvice代表前置增强，表示在目标方法整形前实施增强</p >
			<p style="color: red;">视频讲解</p>	  
					<video controls="controls" autoplay="autoplay" id=video1 width="375" style="margin-top:10px;text-align: center;">
			  	<source src="https://www.w3school.com.cn\example\html5\mov_bbb.mp4"
			  	type="video/mp4"/>
			  </video>
			  <p style="color: red;">相关知识:</p>
			  <p>1.java的循环结构<br />
			  2.Java的继承<br />
			  3.Java的关联机制<br />
			  </p>
			</details>
					<label for="one"><input type="button" value="了解" name="one" style="margin-left: 40px;" onclick="findIndex()"></label>
					<label for="two"><input type="button" value="掌握" name="two" onclick="findIndex()"></label>
					<label for="three"><input type="button" value="熟练" name="three" onclick="findIndex()"></label>
					<label for="four"><input type="button" value="精通" name="four" onclick="findIndex()"></label>
					<br>
					<a href=""><span>上一题</span></a>
					<a href="jiandaxiayiti.html"><span>下一题</span></a><br>
			<p>正在努力中的杨Sir:感谢博主</p><br>
			<p>qq_47773624:大佬可不可在里面再嵌套一层？</p><br>
			<p style="float: left;display: none;" id="ng1">鸟飞绝额覅偶：</p>
			<p id="plxs" style="float: left;"></p>
		</div>
			<textarea cols="30" rows="1" id="pl" placeholder="请写下你的评论..." style="resize: none;display: block;margin:-55px auto;"></textarea>
			<div style="position: absolute;bottom: 0;">
			<textarea cols="50" rows="5" id="plk" placeholder="请写下你的评论..." style="resize: none;display: none;margin:0 2px;"></textarea>
			<button id="fb" style="display: none;margin:5px auto;">发布</button></div>
		
		<div id="fxk">
			<p>请选择分享方式</p><br>
			<img src="img/wx.png" alt="" id="fxtp" style="width:30px;height: 30px;">&nbsp;&nbsp;&nbsp;
			<img src="img/pyq.png" alt="" id="fxtp1" style="width:30px;height: 30px;">&nbsp;&nbsp;&nbsp;
			<img src="img/qq.png" alt="" id="fxtp2" style="width:30px;height: 30px;">&nbsp;&nbsp;&nbsp;
			<img src="img/wb.png" alt="" id="fxtp3" style="width:30px;height: 30px;">
			<button style="width:40px;height: 30px;font-size: 15px;letter-spacing: 2px;margin-left: 130px;">取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
			<span style="margin-left:0px;">微信&nbsp;&nbsp;朋友圈&nbsp;&nbsp;QQ&nbsp;&nbsp;&nbsp;&nbsp;微博</span>
	</div>
</body>
<script type="text/javascript">
	var ndp=document.getElementById("dp");
	var sc=document.getElementById('sc');
	var pl=document.getElementById('pl');
	var lb=document.getElementsByTagName('input');
	var plk=document.getElementById('plk');
	var fb=document.getElementById('fb');
	var fx=document.getElementById('fx');
	var fxk=document.getElementById('fxk');
	var dj=document.getElementById('dj');
	var b=false;
	dj.onclick=function(){
		if(!b){
			sj.src='img/三角形1.png';
			b=!b;
		}else if(b){
			sj.src='img/三角形2.png';
			b=!b;	
		}
	};
	fx.onclick=function(){
		fxk.style.display='block';
	}
	fxk.onclick=function(){
		fxk.style.display='none';
	}
	var plk1=document.getElementById('plk');
	var ng1=document.getElementById('ng1');
	fb.onclick=function(){
		var plxs=document.getElementById('plxs');
		var plk=document.getElementById('plk').value;
		// plxs=plk;
		// console.log(plxs);
		if (plk.length !== 0) {
		plxs.innerHTML=plk;
		plk1.style.display='none';
		fb.style.display='none';
		pl.style.display='block';
		pl.innerText='已评论';
		ng1.style.display='block';
	}else{
		ng1.style.display='none';
		plk1.style.display='none';
		fb.style.display='none';
		pl.style.display='block';
	}
	}
	var d=false;
	sc.onclick=function(){
		if (!b) {
			ndp.src="img/小星星2.png";
			b=!b;
		}else if(b){
		ndp.src="img/小星星.png";
		b=!b;}
	}
	ndp.onclick=function(){
		if (!b) {
			ndp.src="img/小星星2.png";
			b=!b;
		}else if(b){
		ndp.src="img/小星星.png";
		b=!b;}
	}
	pl.onclick=function(){
		plk.style.display='block';
		pl.style.display='none';
		fb.style.display='block';
	}
	function findIndex(arr,e){
            for(var i=0;i<arr.length;i++){
                if(arr[i]==e){
                    return i;
                }
                
            }
        }

        for(var i=0;i<lb.length;i++){
               lb[i].onclick = function(){
                   event.currentTarget.style.background="#99b3cc";
                   var oi = findIndex(lb,event.currentTarget);
                   for (var i = 0; i < lb.length; i++) {
                       if(i!=oi)
                          lb[i].style.background="#F5F5F%";
                   }                          
               }
        }
</script>
</html>